<template>
	<view class="content">
		<view class="nav" :class="show? 'act':''">
			<view class="a" @tap="show=!show" v-if="!show">
				+
			</view>
			<view class="a" @tap="show=!show" v-else-if="show">
				-
			</view>

			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="title" @tap="itemshow(index)">
					{{item.name}}
				</view>
				<view class="main" :class="item.isshow? 'active':''">
					内容
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
						name: 'item1',
						isshow: false
					},
					{
						name: 'item2',
						isshow: false
					},
					{
						name: 'item3',
						isshow: false
					},

				]
			}
		},
		methods: {
			itemshow(val){
				this.show = true
				console.log(val)
				this.list.forEach(el=>{
					el.isshow = false
				})
				this.list[val].isshow = !this.list[val].isshow
				console.log(this.list[val])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background: #fff;
		width: 80rpx;
		height: 100vh;
		text-align: right;
		transition: all .3s;
	}

	.act {
		width: 250rpx;
	}
	
	.item {
		background-color: red;
		border: 1rpx solid black;
		transition: all .3s;
		.active{
			// display: block;
			opacity: 1;
			background-color: blue;
			color: #fff;
			height: 40rpx;
			transition: all .3s;
		}
	}
	.main{
		// display: none;
		opacity: 0;
		height: 0;
		transition: all .3s;
	}
</style>
